<!-- TodoList.vue -->  
<template>  
    <div class="todo-list">  
      <input type="text" v-model="newTodoTitle" @keyup.enter="addTodo" placeholder="添加待办事项" />  
      <div v-for="(todo, index) in todos" :key="index">  
        <todo-item  
          :title="todo.title"  
          :completed="todo.completed"  
          @update:completed="updateTodoCompleted(index, $event)"  
          @remove-todo="removeTodo(index)"  
        />  
      </div>  
    </div>  
  </template>  
    
  <script>  
  import TodoItem from './TodoItem.vue';  
    
  export default {  
    name: 'TodoList',  
    components: {  
      TodoItem  
    },  
    data() {  
      return {  
        newTodoTitle: '',  
        todos: []  
      };  
    },  
    methods: {  
      addTodo() {  
        if (this.newTodoTitle) {  
          this.todos.push({  
            title: this.newTodoTitle,  
            completed: false  
          });  
          this.newTodoTitle = '';  
        }  
      },  
      removeTodo(index) {  
        this.todos.splice(index, 1);  
      },  
      updateTodoCompleted(index, completed) {  
        this.todos[index].completed = completed;  
      }  
    }  
  };  
  </script>  
    
  <style scoped>  
  .todo-list {  
    margin: 20px;  
  }  
  </style>